<template>
  <div>
    <VCard flat>
      <VCardText>
        <VForm
          ref="refForm"
          v-model="isFormValid"
          @submit.prevent="onSubmit"
        >
          <VRow>
            <!-- 👉 Full name -->
            <VCol cols="12">
              <VTextField
                v-model="componentId"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="组件ID"
                clearable
              />
            </VCol>

            <!-- 👉 Email -->
            <VCol cols="12">
              <VTextField
                v-model="componentName"
                :rules="[requiredValidator]"
                class="setting-mb-12"
                label="组件名称"
                clearable
              />
            </VCol>

            <VCol cols="12">
              <VSelect
                v-model="type"
                label="组件类型"
                :rules="[requiredValidator]"
                :items="nodeTypeList"
                clearable
                hint="组件类型"
              />
            </VCol>

            <VCol
              v-if="clazzShow"
              cols="12"
            >
              <VTextField
                v-model="clazz"
                class="setting-mb-12"
                label="Java类"
                clearable
              />
            </VCol>

            <VCol
              v-if="languageShow"
              cols="12"
            >
              <VSelect
                v-model="language"
                label="脚本语言"
                :items="scriptTypeList"
                clearable
              />
            </VCol>

            <VCol
              v-if="scriptShow"
              cols="12"
            >
              <VTextarea
                v-model="script"
                class="setting-mb-12"
                label="脚本代码"
                clearable
                counter
              />
            </VCol>

            <VCol
              v-if="cmpPreShow"
              cols="12"
            >
              <VTextField
                v-model="cmpPre"
                class="setting-mb-12"
                label="前置组件"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpFinallyOptShow"
              cols="12"
            >
              <VTextField
                v-model="cmpFinallyOpt"
                class="setting-mb-12"
                label="后置组件"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpToShow"
              cols="12"
            >
              <VTextField
                v-model="cmpTo"
                class="setting-mb-12"
                label="to"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpDefaultOptShow"
              cols="12"
            >
              <VTextField
                v-model="cmpDefaultOpt"
                class="setting-mb-12"
                label="defaultOpt"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpTrueOptShow"
              cols="12"
            >
              <VTextField
                v-model="cmpTrueOpt"
                class="setting-mb-12"
                label="trueOpt"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpFalseOptShow"
              cols="12"
            >
              <VTextField
                v-model="cmpFalseOpt"
                class="setting-mb-12"
                label="falseOpt"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpParallelShow"
              cols="12"
            >
              <VTextField
                v-model="cmpParallel"
                class="setting-mb-12"
                label="parallel"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpDoOptShow"
              cols="12"
            >
              <VTextField
                v-model="cmpDoOpt"
                class="setting-mb-12"
                label="doOpt"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpBreakOptShow"
              cols="12"
            >
              <VTextField
                v-model="cmpBreakOpt"
                class="setting-mb-12"
                label="breakOpt"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpIdShow"
              cols="12"
            >
              <VTextField
                v-model="cmpId"
                class="setting-mb-12"
                label="id"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpTagShow"
              cols="12"
            >
              <VTextField
                v-model="cmpTag"
                class="setting-mb-12"
                label="标签"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpMaxWaitSecondsShow"
              cols="12"
            >
              <VTextField
                v-model="cmpMaxWaitSeconds"
                class="setting-mb-12"
                label="超时时间(秒)"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpDataNameShow"
              cols="12"
            >
              <VTextField
                v-model="cmpDataName"
                class="setting-mb-12"
                label="组件参数名称(dataName)"
                hint="组件参数名称：b.data(cmpData)"
                clearable
              />
            </VCol>

            <VCol
              v-if="cmpDataShow"
              cols="12"
            >
              <VTextarea
                v-model="cmpData"
                class="setting-mb-12"
                label="组件参数数据"
                :hint="cmpDataHint"
                clearable
                counter
              />
            </VCol>
          </VRow>
        </VForm>
      </VCardText>
    </VCard>
  </div>
</template>

<script setup>
import axios from '@axios'
import {
  requiredValidator,
} from '@validators'
import { reactive, ref } from 'vue'

const props = defineProps({		
  currRow: Object,
  addUrl: String,
  updateUrl: String,
})

const emits = defineEmits(['refreshPage'])
const cmpDataHint = ref("JSON数据格式："+ JSON.stringify({ "name": "jack" }))
const addUrl = ref(props.addUrl)
const updateUrl = ref(props.updateUrl)

const currRow = ref(props.currRow)
const row = currRow.value

const isEdit = ref(!!row.id)

const isFormValid = ref(false)
const refForm = ref()

const id = ref(row.id || '')
const componentId = ref(row.componentId || '')
const componentName = ref(row.componentName || '')
const type = ref(row.type || '')
const script = ref(row.script || '')
const language = ref(row.language || 'java')
const clazz = ref(row.clazz || '')
const cmpPre = ref(row.cmpPre || '')
const cmpFinallyOpt = ref(row.cmpFinallyOpt || '')
const cmpId = ref(row.cmpId || '')
const cmpTag = ref(row.cmpTag || '')
const cmpMaxWaitSeconds = ref(row.cmpMaxWaitSeconds || '')
const cmpTo = ref(row.cmpTo || '')
const cmpDefaultOpt = ref(row.cmpDefaultOpt || '')
const cmpTrueOpt = ref(row.cmpTrueOpt || '')
const cmpFalseOpt = ref(row.cmpFalseOpt || '')
const cmpParallel = ref(row.cmpParallel || '')
const cmpDoOpt = ref(row.cmpDoOpt || '')
const cmpBreakOpt = ref(row.cmpBreakOpt || '')
const cmpData = ref(row.cmpData || '')
const cmpDataName = ref(row.cmpDataName || '')

const clazzShow = ref(false)
const scriptShow =  ref(false)
const languageShow =  ref(false)
const cmpPreShow = ref(false)
const cmpFinallyOptShow = ref(false)
const cmpIdShow = ref(false)
const cmpTagShow = ref(false)
const cmpMaxWaitSecondsShow = ref(false)
const cmpToShow = ref(false)
const cmpDefaultOptShow = ref(false)
const cmpTrueOptShow = ref(false)
const cmpFalseOptShow = ref(false)
const cmpParallelShow = ref(false)
const cmpDoOptShow = ref(false)
const cmpBreakOptShow = ref(false)
const cmpDataShow = ref(false)
const cmpDataNameShow = ref(false)

const getUrl = () => {
  if(isEdit.value){
    return updateUrl.value
  }
  
  return addUrl.value
}

const onSubmit = () => {
  refForm.value?.validate().then(({ valid }) => {
    if (valid) {
      saveItem()
      nextTick(() => {
        refForm.value?.reset()
        refForm.value?.resetValidation()
      })
    }
  })
}

const saveItem = () => {
  axios.post(getUrl(), { 
    id: id.value,
    componentId: componentId.value,
    componentName: componentName.value,
    type: type.value,
    script: script.value,
    language: language.value,
    clazz: clazz.value,
    cmpPre: cmpPre.value,
    cmpFinallyOpt: cmpFinallyOpt.value,
    cmpId: cmpId.value,
    cmpTag: cmpTag.value,
    cmpMaxWaitSeconds: cmpMaxWaitSeconds.value,
    cmpTo: cmpTo.value,
    cmpDefaultOpt: cmpDefaultOpt.value,
    cmpTrueOpt: cmpTrueOpt.value,
    cmpFalseOpt: cmpFalseOpt.value,
    cmpParallel: cmpParallel.value,
    cmpDoOpt: cmpDoOpt.value,
    cmpBreakOpt: cmpBreakOpt.value,
    cmpData: cmpData.value,
    cmpDataName: cmpDataName.value,
  }).then(r => {
    emits('refreshPage', r.data)
  }).catch(e => {
    console.error(e)
  })
}

defineExpose({
  saveItem, onSubmit,
})

// 初始化数据
onMounted(() => {
  changeType(row.type)
  nodeTypeSelect()
  scriptTypeSelect()
})

const nodeTypeList = reactive([])

const nodeTypeSelect = () => {
  axios.post('/liteflow/cmp/type/options', { }).then(r => {
    nodeTypeList.push(...r.data.data)
  }).catch(e => {
    console.error(e)
  })
}

const scriptTypeList = reactive([])

const scriptTypeSelect = () => {
  axios.post('/liteflow/cmp/script/options', { }).then(r => {
    scriptTypeList.push(...r.data.data)
  }).catch(e => {
    console.error(e)
  })
}

watch(type, val => {
  changeType(val)
})

const shows = [
  clazzShow,
  scriptShow,
  languageShow,
  cmpPreShow,
  cmpFinallyOptShow,
  cmpIdShow,
  cmpTagShow,
  cmpMaxWaitSecondsShow, 
  cmpToShow,
  cmpDefaultOptShow,
  cmpTrueOptShow,
  cmpFalseOptShow,
  cmpParallelShow,
  cmpDoOptShow,
  cmpBreakOptShow, 
  cmpDataNameShow,
  cmpDataShow,
]

const changeType = val => {
  if (val == 'common'){
    changeTypes([clazzShow, cmpPreShow, cmpFinallyOptShow, cmpIdShow, cmpTagShow, cmpMaxWaitSecondsShow])
  }else if(val == 'switch'){
    changeTypes([clazzShow, cmpPreShow, cmpFinallyOptShow, cmpIdShow, cmpTagShow, cmpMaxWaitSecondsShow, cmpToShow, cmpDefaultOptShow])
  }

  // if(val == 'switch'){
  //   clazzShow.value = true
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = true
  //   cmpFinallyOptShow.value = true
  //   cmpIdShow.value = true
  //   cmpTagShow.value = true
  //   cmpMaxWaitSecondsShow.value = true
  //   cmpToShow.value = true
  //   cmpDefaultOptShow.value = true
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'if'){
  //   clazzShow.value = true
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = true
  //   cmpFinallyOptShow.value = true
  //   cmpIdShow.value = true
  //   cmpTagShow.value = true
  //   cmpMaxWaitSecondsShow.value = true
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = true
  //   cmpFalseOptShow.value = true
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'break'){
  //   clazzShow.value = true
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = true
  //   cmpFinallyOptShow.value = true
  //   cmpIdShow.value = true
  //   cmpTagShow.value = true
  //   cmpMaxWaitSecondsShow.value = true
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'for' || val == 'while'){
  //   clazzShow.value = true
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = true
  //   cmpFinallyOptShow.value = true
  //   cmpIdShow.value = true
  //   cmpTagShow.value = true
  //   cmpMaxWaitSecondsShow.value = true
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = true
  //   cmpDoOptShow.value = true
  //   cmpBreakOptShow.value = true
  // }

  // if(val == 'iterator'){
  //   clazzShow.value = true
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = true
  //   cmpFinallyOptShow.value = true
  //   cmpIdShow.value = true
  //   cmpTagShow.value = true
  //   cmpMaxWaitSecondsShow.value = true
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = true
  //   cmpDoOptShow.value = true
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'fallback'){
  //   clazzShow.value = false
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'script'){
  //   clazzShow.value = false
  //   scriptShow.value = true
  //   languageShow.value = true
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'switch_script'){
  //   clazzShow.value = false
  //   scriptShow.value = true
  //   languageShow.value = true
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = true
  //   cmpDefaultOptShow.value = true
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'if_script'){
  //   clazzShow.value = false
  //   scriptShow.value = true
  //   languageShow.value = true
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = true
  //   cmpFalseOptShow.value = true
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(val == 'for_script' || val == 'while_script'){
  //   clazzShow.value = false
  //   scriptShow.value = true
  //   languageShow.value = true
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = true
  //   cmpDoOptShow.value = true
  //   cmpBreakOptShow.value = true
  // }

  // if(val == 'break_script'){
  //   clazzShow.value = false
  //   scriptShow.value = true
  //   languageShow.value = true
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  // }

  // if(!val){
  //   clazzShow.value = false
  //   scriptShow.value = false
  //   languageShow.value = false
  //   cmpPreShow.value = false
  //   cmpFinallyOptShow.value = false
  //   cmpIdShow.value = false
  //   cmpTagShow.value = false
  //   cmpMaxWaitSecondsShow.value = false
  //   cmpToShow.value = false
  //   cmpDefaultOptShow.value = false
  //   cmpTrueOptShow.value = false
  //   cmpFalseOptShow.value = false
  //   cmpParallelShow.value = false
  //   cmpDoOptShow.value = false
  //   cmpBreakOptShow.value = false
  //   cmpDataNameShow.value = false
  //   cmpDataShow.value = false
  // }else{
  //   cmpDataNameShow.value = true
  //   cmpDataShow.value = true
  // }
}

const changeTypes = vals => {
  shows.forEach(item => {
    item.value = vals.includes(item)
  })

  // Object.values(vals).forEach(item => {
  //   if (flag !== item.value) {
  //     item.value = flag
  //   }
  // })

  // for(const item in vals){
  //   if(flag != vals[item].value){
  //     vals[item].value = flag
  //   }
  // }
}
</script>

<style scoped>
.lf-config-row .v-col {
  padding-block-end: 3px;
}

.lf-config-item {
  padding-block-start: 8px;
}

.btn-w100 {
  inline-size: 100%;
}
</style>
